<template>
	<view class="jf-keyboard-fixed__mask" v-if="props.mask && props.modelValue" @click="close()"></view>
	<view class="jf-keyboard-fixed" :style="{'--bottom': data.bottom + 'px'}" v-if="props.modelValue">
		<slot></slot>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue';
	
	const props = withDefaults(defineProps<{
		modelValue: boolean
		mask?: boolean
	}>(),{
		modelValue: false,
		mask: false
	})
	const emits = defineEmits<{
		(e: "update:modelValue", status: boolean)
		(e: "close")
	}>()
	const data = reactive({
		bottom: 0
	})
	
	const close = ():void => {
		emits("update:modelValue", false)
		emits("close")
	}
	
	uni.onKeyboardHeightChange(res => {
		data.bottom = res.height
	})
</script>

<style lang="scss">
	.jf-keyboard-fixed__mask{
		position: fixed;
		z-index: 998;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.6);
	}
	.jf-keyboard-fixed{
		position: fixed;
		z-index: 999;
		left: 0;
		bottom: var(--bottom);
	}
</style>
